<template>
  <div>
    <div id="chat_footer" class="flex items-center bg-[#F0F2F6] px-3 py-3">
      <div class="flex-grow">
        <CustomEdit
          ref="inputRef"
          v-model:input="messageContent"
          class="bg-[#fff]"
          placeholder="请输入"
          @focus="onFocusUpdate(true)"
          @blur="onFocusUpdate(false)"
          @trigger-at="() => {}"
        />
      </div>
      <uni-icons
        v-show="!messageContent"
        type="plusempty"
        size="16"
        @click="clickAddBtn"
      ></uni-icons>
      <uni-icons
        v-show="messageContent"
        type="paperplane"
        size="16"
        @click="switchTextMessage"
      ></uni-icons>
    </div>
    <!-- <ChatFooterAction
      v-show="showActionBar"
      @close-action-bar="closeActionBar"
      @get-file="getFile"
    /> -->
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  import CustomEdit from '@/components/CustomEdit/CustomEdit.vue';
  // import ChatFooterAction from './ChatFooterAction.vue';
  // import { MessageType } from '@openim/client-sdk';
  import useSendMessage from '@/hooks/useSendMessage';
  // import { feedbackToast } from '@/utils/common';
  import emitter from '@/utils/events';
  import { checkIsSafari } from '@/utils/common';
  import useCreateNomalMessage from './useCreateNomalMessage';
  // import useCreateFileMessage from './useCreateFileMessage';

  // const { createFileMessage } = useCreateFileMessage();

  // message
  const messageContent = ref('');
  const inputRef = ref();

  const { switchNomalMessage } = useCreateNomalMessage({
    messageContent,
  });
  const { sendMessage } = useSendMessage();

  const onFocusUpdate = (isFocus: boolean) => {
    if (!checkIsSafari()) {
      return;
    }
    setTimeout(() => emitter.emit('KEYBOARD_UPDATE'), 100);
    if (isFocus) {
      setTimeout(() => window.scroll(0, 0), 101);
    }
  };

  const switchTextMessage = async () => {
    const message = await switchNomalMessage();
    if (message) {
      sendMessage({ message });
    }
    resetState();
  };

  const resetState = () => {
    messageContent.value = '';
    inputRef.value.clear();
  };

  // action bar
  const showActionBar = ref(false);
  const showEmojiBar = ref(false);

  // const closeActionBar = () => {
  //   showActionBar.value = false;
  // };
  const clickAddBtn = () => {
    if (showEmojiBar.value) {
      showEmojiBar.value = false;
    }
    showActionBar.value = !showActionBar.value;
  };

  // const getFile = async (uploadData: any) => {
  //   let messageType = MessageType.FileMessage;
  //   if (uploadData.file?.type.includes('image')) {
  //     messageType = MessageType.PictureMessage;
  //   }
  //   const { error, message } = await createFileMessage(uploadData.file!, messageType);
  //   if (error || !message) {
  //     // feedbackToast({ error, message: error });
  //     return;
  //   }
  //   sendMessage({
  //     message,
  //   });
  // };

  // onMounted(() => {
  //   if (!inputRef.value) return;
  //   inputRef.value.inputRef.focus();
  // });

  // onActivated(() => {
  //   if (!inputRef.value) return;
  //   resetState();
  //   inputRef.value.clear();
  //   inputRef.value.inputRef.focus();
  // });
</script>

<style lang="scss" scoped>
  :deep(.van-button__content) {
    width: max-content;
  }
</style>
